<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>书架</title>
    <script rel="stylesheet" src="/js/jquery.js"></script>
    <script rel="stylesheet" src="/js/modal.js"></script>
    <script rel="stylesheet" src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/font/bootstrap-icons.css}">
    <style type="text/css">
        #bookRack{
            width: 80%;
            margin: auto;
        }
        #bookRack a{
            color:black;
        }
        #bookRack a:hover{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="bookRack">
        <!--导航栏-->
        <div class="row">
            <div class="col-md-12">
                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <h4 class="navbar-nav mr-auto" style="font-weight: bold;padding-right: 10px;">
                        <a th:href="'/user/index'"><i class="bi bi-book"></i>&nbsp; 茄子小说网</a>
                    </h4>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li th:each="types, iterStat : ${typeList}" class="nav-item">
                                <a th:href="'/user/toMain?typeId='+${types.typeId}+'&typeName='+${types.typeName}"
                                   th:text="${types.typeName}" target="myIframe" class="nav-link"></a>
                            </li>
                        </ul>

                        <ul class="nav justify-content-end" th:if="${session.user==null}">
                            <li class="nav-item">
                                <a id="loginModel" type="button" class="btn" onclick="loginModelShow()">登录</a>
                            </li>
                            <li class="nav-item">
                                <a type="button" class="btn" onclick="registerModelShow()">注册</a>
                            </li>
                            <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-layout-text-sidebar-reverse"></i>&nbsp;我的书架</a></li>
                        </ul>
                        <ul class="nav justify-content-end" th:if="${session.user!=null}">
                            <li class="nav-item">
                                <a class="nav-link" th:text="'欢迎您  '+${session.user.getUsername()}">xx</a>
                            </li>
                            <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-layout-text-sidebar-reverse"></i>&nbsp;我的书架</a></li>
                            <li class="nav-item"><a class="nav-link" th:href="'/user/exit'">退出</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
        <!--搜索框-->
        <div class="row">
            <div class="col-md-12" style="height: 200px">
                <form class="form-inline" style="padding-left: 30%;;padding-top: 90px">
                    <div class="form-group ">
                        <input type="text" class="form-control" id="inputFictionName" placeholder="输入作品名或作家名"
                               style="width: 500px">
                    </div>
                    <button id="searchFictionButton" onclick="searchFiction()" type="button" class="btn btn-outline-info">
                        <i class="bi bi-search"></i>
                        搜书架
                    </button>
                </form>
            </div>
        </div>
        <div class="row">
            <a class="nav-link"><i class="bi bi-clock-history"></i>历史阅读</a>
        </div>
        <div class="row">
            <table class="table">
                <thead>
                <tr>
                    <th scope="col">置顶</th>
                    <th scope="col">书籍名称</th>
                    <th scope="col">类型</th>
                    <th scope="col">是否完本</th>
                    <th scope="col">更新时间</th>
                    <th scope="col">作者</th>
                    <th scope="col">阅读状态</th>
                    <th scope="col">选择</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="bookRackVo:${bookRackVoList}">
                    <td th:if="${bookRackVo.lstop} == 1">
                        <i class="bi bi-arrow-up-square"></i>
                    </td>
                    <td th:if="${bookRackVo.lstop} == 0">-</td>
                    <td th:text="${bookRackVo.fictionName}"></td>
                    <td th:text="${bookRackVo.typeName}"></td>
                    <td th:text="${bookRackVo.fictionState}"></td>
                    <td th:text="${#dates.format(bookRackVo.updateTime, 'yyyy-MM-dd HH:mm')}"></td>
                    <td th:text="${bookRackVo.authorName}"></td>
                    <td th:text="${bookRackVo.readStatus}"></td>

                    <td th:if="${bookRackVo.lstop} == 1">
                        <button type="button" class="btn btn-outline-primary">取消置顶</button>
                        <button type="button" class="btn btn-outline-primary">删除</button>
                        <button type="button" class="btn btn-outline-primary">收藏</button>
                    </td>
                    <td th:if="${bookRackVo.lstop} == 0">
                        <button type="button" class="btn btn-outline-primary">置顶</button>
                        <button type="button" class="btn btn-outline-primary">删除</button>
                        <button type="button" class="btn btn-outline-primary">收藏</button>
                    </td>
                </tr>

                </tbody>
            </table>
        </div>
    </div>
</body>
</html>